<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { Actionbar, Toolbar, Column, FormItem, } from '@ainiteam/quick-vue3-ui'
import { type Product } from '@/types/product'
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteProduct, updateProduct, addProduct, getProductList } from '@/api/device/product'
/**
 * 属性
 */
const loading = ref(false)
const dataList = reactive<Array<Product>>([
    {

        id: '1',
        productName: '设备网关',
        quantity: 0,
        publish: '已启用',
        deviceType: '网管设备',
        productId: '',

    },
])
/**
 * 表单
 */
const dialogTitle = reactive({
    add: '添加产品',
    edit: '编辑产品',
    detail: '产品详情',
})
const formModel = reactive<Product>({
    id: '',
    productName: '',
    quantity: '',
    publish: '',
    deviceType: '',
    productId: '',
})
const formItems = reactive<Array<FormItem>>([
    {
        label: '产品名称',
        labelWidth: '80px',
        vModel: 'productName',
        placeholder: '产品名称',
        prop: 'productName',
        rules: [
            {
                required: true,
                message: '产品名称不能为空',
                trigger: 'blur',
            },
        ],
    },
    {
        label: '发布状态',
        labelWidth: '80px',
        vModel: 'publish',
        placeholder: '发布状态',
        prop: 'publish',
        rules: [
            {
                required: true,
                message: '产品ID不能为空',
                trigger: 'blur',
            },
        ],
    },
    {
        label: '设备数量',
        labelWidth: '80px',
        vModel: 'quantity',
        type: 'quantity',
        placeholder: '设备数量',
    },
    {
        label: '设备类型',
        labelWidth: '80px',
        vModel: 'deviceType',
        type: 'deviceType',
        placeholder: '设备类型',
    }
])
const handleFormSubmit = (form: Product, done: any) => {
    const row = { ...form }
    if (row.id) {
        updateProduct(row).then(() => {
            ElMessage({
                type: 'success',
                message: '产品修改成功',
            })
            done()
        })
    } else {
        row.id = undefined
        addProduct(row).then(() => {
            ElMessage({
                type: 'success',
                message: '产品创建成功',
            })
            done()
        })
    }
}
/**
 * 操作栏
 */
const tableActionbar = reactive<Actionbar>({
    width: 200,
    detailButtonName: '查看',
})
const handleDelete = (item: Product, done: any) => {
    ElMessageBox.confirm(`你真的删除【${item.productName}】的产品吗？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        if (!item.id) {
            return
        }
        deleteProduct(item.id).then(() => {
            ElMessage({
                type: 'success',
                message: '产品删除成功',
            })
            done()
        })
    })
}
/**
 * 表格
 */
const tableColumns = reactive<Array<Column>>([
    {
        width: '50',
        type: 'selection',
    },
    {
        width: '60',
        type: 'index',
        label: '序号',
    },
    {
        label: '产品名称',
        prop: 'productName',
        width: '100'
    },
    {
        label: '设备数量',
        prop: 'quantity',
        width: '100',
    },
    {
        label: '发布状态',
        prop: 'publish',
        width: '100',
    },
    {
        label: '设备类型',
        prop: 'deviceType',
    },
])
/**
 * 工具栏
 */
const tableToolbar = reactive<Toolbar>({
    addButtonName: '新增',
    hiddenBatchDeleteButton: true,
    hiddenPrintButton: true,
    hiddenImportButton: true,
    hiddenExportButton: true
})
/**
 * 加载数据
 */
const load = () => {
    loading.value = true
    getProductList().then((res) => {
        loading.value = false
        const { data: productList } = res
        dataList.length = 0
        dataList.push(...productList)
    })
}
</script>
<template>
    <quick-crud :form-model="formModel" :form-items="formItems" :table-data="dataList" :table-columns="tableColumns"
        :table-actionbar="tableActionbar" :table-toolbar="tableToolbar" @on-form-submit="handleFormSubmit"
        @on-delete="handleDelete" :dialog-title="dialogTitle" @on-load="load"></quick-crud>
</template>